<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Animation Practice</title>
    <style type="text/css">
    body {
        margin: 30px;
        text-align: center;
        font-family: monospace;
    }

    .container {
        line-height: 300px;
        position: relative;
        width: 1px;
        top: 50%;
        left: 50%;
        margin-top: 200px;
        font-size: 3rem;
        perspective: 2000px;
        perspective-origin: 0 150px;
        transform-style: preserve-3d;
    }

    .side {
        transition-duration: 3s;
        height: 300px;
        width: 300px;
        border: 5px solid rgba(0, 0, 0, .3);
        position: absolute;
        left: -150px;
        top: 50%;
    }
    </style>
</head>

<body>
    <h1>3D 正方体组合旋转</h1>
    <div class="container">
        <div class="back side">back</div>
        <div class="front side">front</div>
        <div class="side right">right</div>
        <div class="side left">left</div>
        <div class="side bottom">botto </div>
        <div class="side top">top </div>
    </div>
    <style type="text/css">
    .top {
        animation: placeTop 1s linear both;
        transition-property: background-color;
    }

    .bottom {
        animation: placeBottom 1s 1s linear both;
        transition-property: background-color;
    }

    .left {
        animation: placeLeft 1s 2s linear both;
        transition-property: background-color;
    }

    .right {
        animation: placeRight 1s 3s linear both;
        transition-property: background-color;
    }

    .back {
        animation: placeBack 1s 4s linear both;
        transition-property: background-color;
    }

    .front {
        animation: placeFront 1s 5s linear both;
        transition-property: background-color;
    }

    .container {
        animation: cube 3s 6s linear infinite both;
    }

    .container:hover .top {
      background-color: red;
    }
    .container:hover .bottom {
      background-color: green;
    }
    .container:hover .left {
      background-color: blue;
    }
    .container:hover .right {
      background-color: yellow;
    }
    .container:hover .back {
      background-color: gray;
    }
    .container:hover .front {
      background-color: orange;
    }

    @keyframes placeTop {
        100% {
            transform: translateY(-150px) rotateX(90deg);
        }
    }

    @keyframes placeBottom {
        100% {
            transform: translateY(150px) rotateX(90deg);
        }
    }

    @keyframes placeLeft {
        100% {
            transform: translateX(-150px) rotateY(90deg);
        }
    }

    @keyframes placeRight {
        100% {
            transform: translateX(150px) rotateY(90deg);
        }
    }

    @keyframes placeBack {
        100% {
            transform: translateZ(-150px) rotateY(180deg);
        }
    }

    @keyframes placeFront {
        100% {
            transform: translateZ(150px);
        }
    }

    @-webkit-keyframes cube {
        0% {
            perspective: 2000px;
        }
        100% {
            perspective: 0px;
            transform: rotate3d(0.5, 0.5, 0.5, 360deg);
        }
    }
    </style>
</body>

</html>
